<template>
    <div class="header clear">
        <div class="shopDetail">
            <div class="pic">
                <img width="64" height="64" :src= "seller.avatar">
            </div>
            <div class="text">
                <p class="title">
                    <span class="brand"></span>
                    <span class="name">{{seller.name}}</span>
                </p>
                <p class="description">
                    {{seller.description}}/{{seller.deliveryTime}}分钟送达
                </p>
                <div  v-if ='seller.supports' class="shopMenu" >
                    <p class="cost">
                        <icons :type ='seller.supports[0].type'></icons>
                        <span class="content">{{ seller.supports[0].description}}</span>
                    </p>
                    <p class="number" @click="showDetail()">
                        <span class="content">
                          {{ seller.supports.length}}个
                        </span>
                        <i class="icon-keyboard-arrow-right"></i>

                    </p>
                </div>
            </div>
        </div>
        <div class="tip" @click="showDetail()">
            <span class="title">

            </span>
            <span class="tontent">
                {{seller.bulletin}}
            </span>
            <i class="icon-keyboard-arrow-right"></i>
        </div>
        <div class="background">
            <img :src = 'seller.avatar' width="100%" height="100%">
        </div>
        <div class="detail" v-show = 'detailShow'>
          <div class="main">
              <div class="title">
                  {{seller.name}}
                  <star :size='36' :score='seller.score'></star>
              </div>
              <div class="privilegeCotain">
                  <div class="privilegeTitle">
                      <div class="line"></div>
                      <div class="text">优惠信息</div>
                      <div class="line"></div>
                  </div>
                  <div class="pCotain">
                      <div v-for ="supports in seller.supports" >
                          <i class="icon" :class = 'classMap[supports.type]'></i>
                          <span> {{supports.description}}</span>
                      </div>
                  </div>
              </div>
              <div class="privilegeCotain">
                  <div class="privilegeTitle">
                      <div class="line"></div>
                      <div class="text">商家公告</div>
                      <div class="line"></div>
                  </div>
                  <div class="sellerDetail" >
                      {{seller.bulletin}}
                  </div>
              </div>
          </div>
          <div class="footer">
              <i class="icon-close" @click="hideDetail()"></i>
          </div>
        </div>
    </div>
</template>
<script>
  import star from 'components/star/star';
  import icons from 'components/icon/icon';
  export default{
    props: {
      seller: {
        type: Object
      }
    },
    data() {
      return {
        detailShow: false
      };
    },
    methods: {
      showDetail() {
        this.detailShow = true;
      },
      hideDetail() {
        this.detailShow = false;
      }
    },
    created() {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
    },
    components: {
      star,
      icons
    }
  };
</script>
<style lang="scss" rel="stylesheet/scss">
  @import '../../common/scss/mixin.scss';
  .header{
      position: relative;
      background-color: rgba(7,17,27,0.5);
      overflow: hidden;
    .shopDetail{
          position: relative;
          padding:24px 0px 24px 18px;
          color: #fff;
          @include clear ;
          .text,.pic{
              float: left;
          }
          .text{
              margin-left: 16px;
              .title{
                  vertical-align: top;
                  margin-bottom: 8px;
                  .name{
                      font-size: 16px;
                      font-weight: bold;
                      display: inline-block;
                      vertical-align: top;
                  }
                  .brand{
                      display: inline-block;
                      width: 30px;
                      height: 18px;
                      bakcground-repeat:no-repeat;
                      background-size: 30px 18px;
                      @include bg-img('brand')
                  }
              }
              .description{
                  margin-bottom: 10px;
              }
              .shopMenu{
                  @include clear ;
                  .cost{
                      float: left;
                      .content{
                          vertical-align: top;
                          font-size: 10px;
                          line-height: 16px;
                      }
                  }
                  .number{
                      position: absolute;
                      right:12px;
                      bottom:18px;
                      height:24px;
                      line-height: 24px;
                      padding:0px 8px;
                      background:rgba(0,0,0,0.2);
                      color: #fff;
                      font-weight:200;
                      text-align: center;
                      border-radius: 14px;
                      .content{
                          vertical-align: top;
                          font-size: 10px;
                      }
                      .icon-keyboard-arrow-right{
                          vertical-align: top;
                          font-size:10px;
                      }
                  }
              }
          }


      }
    .tip {
        position: relative;
        height: 28px;
        line-height: 28px;
        font-size: 10px;
        background-color: rgba(7, 17, 27, 0.2);
        padding: 0 22px 0 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #fff;
        .title{
            display: inline-block;
            vertical-align: top;
            margin:7px 0px;
            width: 22px;
            height: 12px;
            @include bg-img('bulletin');
            background-size:22px 12px;
            background-repeat: no-repeat;
        }
        .content{
            display: inline-block;
            vertical-align: top;
        }
        .icon-keyboard-arrow-right{
            position: absolute;
            right:12px;
            top:10px;
        }
    }
    .background{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height:100%;
        z-index: -1;
        filter:blur(10px);
    }
    .detail{
        position: fixed;
        top:0px;
        left: 0px;
        z-index: 100;
        height:100%;
        width: 100%;
        overflow: auto;
        background-color: rgba(1,17,27,0.8);
        .main{
            min-height: 100%;
            padding-bottom: 64px;
            box-sizing: border-box;
            color: white;
            padding-top: 64px;
            .title{
                line-height: 16px;
                text-align: center;
                font-size:18px;
                font-weight: bold;
            }
            .star{
                margin-top: 16px;
                margin-bottom: 28px;
            }
            .privilegeTitle{
                display: flex;
                width: 80%;
                margin:0 auto;
                font-size: 18px;
                .line{
                    flex: 1;
                    border-bottom:1px solid rgba(255,255,255,0.3);
                    position: relative;
                    top:-10px;
                }
                .text{
                    padding: 0px 12px;
                    font-weight: bold;
                }
            }
            .sellerDetail{
                width: 80%;
                margin:10px  auto 0px auto;
                line-height: 20px;
            }
            .pCotain{
                padding-left: 10%;
                line-height: 24px;
                margin-bottom: 23px;
                .icon {
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    background-size: 12px 12px;
                    margin-right: 4px;
                    &.decrease {
                        @include bg-img('decrease_1')
                    }
                    &.discount {
                        @include bg-img('discount_1')
                    }
                    &.special {
                        @include bg-img('special_1')
                    }
                    &.invoice {
                        @include bg-img('invoice_1')
                    }
                    &.guarantee {
                        @include bg-img('guarantee_1')
                    }
                }
            }
        }
        .footer{
            position: relative;
            width:32px;
            height:32px;
            margin: -64px auto 0px auto;
            clear: both;
            cursor: pointer;
            font-size: 32px;
            text-align: center;
        }
    }
  }

</style>
